<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack" title="干预措施">
				<view slot="center" class="navTitle">
					干预措施
				</view>
			</u-navbar>
			<view class="pd30">
				<view class="filterBlock">
					<view class="block">
						<view class="full">
							<DateRange @change="dateRangeChange"></DateRange>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="interveneList">
						<view class="item" v-for="(j,jindex) in list" :key="jindex">
							<view class="ihd">
								<view class="date">
									{{j.time}}
								</view>
								<view class="bx">
									<view class="bxt">
										危机等级
									</view>
									<view class="bxr">
										<view class="tag"
											:style="'color:'+stageOption(j.level).color+';background:'+stageOption(j.level).bgColor">
											{{stageOption(j.level).label}}
										</view>
									</view>
								</view>
								<view class="interveneGrade">
									<view class="cl">
										查看学生档案权限
									</view>
									<view class="cr">
										<CheckboxGroup :disable='true' :multiple="true" :options="permissions"
											:value="j.viewPermission"></CheckboxGroup>
									</view>
								</view>
							</view>
							<view class="workBox">
								<view class="date">
									{{j.time}}
								</view>
								<view class="workItem" v-for="(k,kindex) in j.notifyTypeList" :key="kindex">
									<view class="wtit">
										<view class="tl">
											干预措施
										</view>
										<view class="tr">
											<view class="targetTag">
												<view class="tt">
													任务对象
												</view>
												<view class="tp">
													{{k.typeName}}
												</view>
											</view>
											
										</view>
									</view>
									<!-- <view class="rwdx" v-if="!k.target">
										{{TaskObjective('').text}}
									</view> -->
									<view class="wkitem" v-for="(l,lindex) in k.interveneList" :key="lindex">
										<view class="tit" :class="{'pink':!l.completed,'s2':lindex==0}">
											<view class="titin">
												<view class="tl">
													<view class="or">{{(lindex+1)}}</view>
													<view class="t">
														{{l.planName}}
													</view>
												</view>
												<view class="tr">
													{{l.completed?'已完成':'未完成'}}
												</view>
											</view>
										</view>
										<template v-for="(m,mindex) in l.tasksList">
											<view class="rpt">
												<template v-if="l.plan==0">
													<!-- <view class="subt" :class="m.isComplete?'':'s2'" v-if="m.subtitle">
														<view class="dot"></view>
														<view class="tc block border">
															<view class="ct">
																<view class="t">{{m.title}}</view>
															</view>
															<view class="cb">
																<view class="cl">
																	{{m.subtitle}}
																</view>
																<view class="tr">
																	<view class="btn" @tap="viewzjDetail(m.id)">
																		查看
																	</view>
																</view>
															</view>
														</view>
													</view> -->
													<view class="subt" :class="m.completed?'':'s2'">
														<view class="dot"></view>
														<view class="tc border">
															<view class="t">{{m.bizName}}</view>
															<view class="tr">
																<view class="btn" @tap="viewzjDetail(m.bizId)">
																	查看
																</view>
															</view>
														</view>
													</view>
												</template>
												<view class="subt" :class="m.completed?'':'s2'"  v-if="l.plan==1">
													<view class="dot"></view>
													<view class="tc">
														<view class="t">{{m.bizName}}</view>
														<view class="tr">
															<view>
																<view class="btn" @tap="viewDetail(m.bizId)">
																	查看
																</view>
															</view>
															<!-- <view v-if="m.messageType==7">
																{{m.notice||''}}
															</view> -->
														</view>
													</view>
												</view>
												<view class="ul" v-if="m.messageType==2">
													<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
														<view class="idate">
															{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
														</view>
														<view class="it">
															{{n.title}}
														</view>
														<view class="ir">
															<view class="btn" @tap="viewStudentCommunicate(n.id)">
																查看
															</view>
														</view>
													</view>
												</view>
												<view class="ul" v-if="m.messageType==3">
													<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
														<view class="idate">
															{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
														</view>
														<view class="it">
															{{n.title}}
														</view>
														<view class="ir">
															<view class="btn" @tap="viewDailyDetail(n.id)">
																查看
															</view>
														</view>
													</view>
												</view>
												<view class="ul" v-if="m.messageType==4">
													<view class="li" v-for="(n,nindex) in m.children" :key="nindex">
														<view class="idate">
															{{n.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
														</view>
														<view class="it">
															{{n.title}}
														</view>
														<view class="ir">
															<view class="btn" @tap="viewParentCommunicate(n.id)">
																查看
															</view>
														</view>
													</view>
												</view>
												<view class="ul" v-if="m.messageType==6">
													<view class="li">
														<view class="idate">
															会诊时间
														</view>
														<view class="ir">
															{{m.consultation.date|dateFormate('YYYY年MM月DD日 hh:mm')}}
														</view>
													</view>
													<view class="li">
														<view class="idate">
															会诊地点
														</view>
														<view class="ir">
															{{m.consultation.location}}
														</view>
													</view>
												</view>
											</view>
										</template>
										<view class="wtips" v-if="l.tips">
											<rich-text :nodes="l.tips"></rich-text>
										</view>

									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemid: '',
				permissions: [{
						value: 0,
						label: '家长'
					},
					{
						value: 1,
						label: '班主任'
					}
				],
				oldScrollTop: 0,
				scrollTop: 0,
				startDate: '',
				endDate: '',
				list: []
			}
		},
		methods: {
			viewDailyDetail(id) { //查看日常观察记录
				uni.navigateTo({
					url: '/subpage/teacher/DailyObservation/detail?id=' + id
				});
			},
			viewStudentCommunicate(id) { //查看学生访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/studentCommunicate/detail?id=' + id
				});
			},
			viewParentCommunicate(id) { //查看家长访谈记录
				uni.navigateTo({
					url: '/subpage/teacher/homeVisits/detail?id=' + id
				});
			},
			viewDetail(id) { //单篇详情
				uni.navigateTo({
					url: '/subpage/notice/notice?id=' + id
				})
			},
			viewzjDetail(id) { //查看转介信
				uni.navigateTo({
					url: '/subpage/teacher/letter/letter?id=' + id
				});
			},
			dateRangeChange(e) { //日期范围变化
				var that = this;
				that.startDate = e.start;
				that.endDate = e.end;
				that.getInfo();
			},
			updateScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
			},
			getInfo() {
				//messageType:列表消息类型：0转介信，1课程，2日常访谈记录表，3行为观察表，4家访记录表,5通知，6会诊，7消息，8测评
				var that = this;
				if (that.itemid) {
					
					
					this.$api.interveneHistory({
						managementId:that.itemid,
						methodType:'get'
					}, res => {
						if (res.code == 200) {
							res.data.some(item=>{
								item.viewPermission=[]
								if(item.parentPower){
									item.viewPermission.push(0)
								}
								if(item.headTeacherPower){
									item.viewPermission.push(1)
								}
								
								
							})
							this.list=res.data
						}
					})
					
				}
			}
		},
		onLoad(e) {
			if(e.id){
				this.itemid=e.id
			}
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.interveneGrade {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.cl {
			flex: 1 1 auto;
			font-size: 28rpx;
			color: #897f7a;
			overflow: hidden;
			padding-right: 30rpx;
		}

		.cr {
			flex: 0 0 auto;
		}
	}

	.interveneList {
		.item {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.workItem {
			margin-bottom: 30rpx;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #f8f6f4;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border: none;
			}
		}

		.ihd {
			padding: 30rpx;
			border-radius: 30rpx;
			background: #fff;
			margin-bottom: 20rpx;

			.date {
				line-height: 1;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #f8f6f4;
				color: #65554d;
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}

			.bx {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bxt {
					flex: 1 1 auto;
					padding-right: 30rpx;
					font-size: 32rpx;
					color: #65554d;
				}

				.bxr {
					flex: 0 0 auto;

					.tag {
						padding: 0 12rpx;
						line-height: 40rpx;
						border-radius: 6rpx;
						font-size: 28rpx;
					}
				}
			}
		}

		.wtit {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;

			.tl {
				flex: 1 1 auto;
				overflow: hidden;
				font-size: 32rpx;
				color: #65554d;
			}

			.tr {
				flex: 0 0 auto;

				.btn {
					padding: 0 12rpx;
					line-height: 40rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
					background: #df7f83;
					color: #fff;
				}
			}
		}

		.rwdx {
			padding: 26rpx 30rpx;
			text-align: center;
			margin: -13rpx -40rpx 30rpx;
			background: #ffebf2;
			color: #df6982;
			font-size: 24rpx;
			position: relative;

			&:after {
				content: "";
				position: absolute;
				right: 90rpx;
				bottom: 100%;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 6rpx solid #ffebf2;
			}
		}

		.workBox {
			.tit {
				padding: 15rpx 0;
				background: none;
				display: block;

				.titin {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 30rpx 30rpx 0;
					background: linear-gradient(90deg, #fff, #dbf3e5);
					border-radius: 0 20rpx 20rpx 0;

				}

				&.pink {
					.titin {
						background: linear-gradient(90deg, #fff, #ffdeea);
					}
				}

				&:before {
					content: "";
					position: absolute;
					left: 14rpx;
					width: 4rpx;
					bottom: calc(50% + 10rpx);
					top: 0;
					background: #e8e8e8;
					z-index: 1;
				}

				&:after {
					content: "";
					position: absolute;
					left: 14rpx;
					width: 4rpx;
					top: calc(50% + 10rpx);
					bottom: 0;
					background: #e8e8e8;
					z-index: 1;
				}

				&.s2 {
					&:before {
						display: none;
					}

					&:after {
						display: block;
					}
				}
			}
		}
	}

	.slot-content {
		flex: 0 0 auto;
		width: 100%;
	}

	/deep/.u-popup__content {
		border-radius: 30rpx !important;

		.u-modal__title {
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}

		.u-modal__content {
			padding: 40rpx 40rpx 0 !important;
		}

		.u-line {
			display: none;
		}

		.u-modal__button-group__wrapper {
			height: 120rpx;
			border-radius: 0 !important;

			.u-modal__button-group__wrapper__text {
				font-size: 28rpx !important;
			}
		}
	}

	.resonTextarea {
		padding: 20rpx;
		height: 300rpx;
		outline: none;
		border: none;
		background: #f9f8f6;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #897f7a;
		line-height: 1.6;
		width: 100%;
		box-sizing: border-box;
	}

	.appointDetail {
		padding-bottom: 40rpx;

		.tp {
			padding: 40rpx 0 60rpx;

			.ico {
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto 30rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.tit {
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 1;
				color: #65554d;
				margin-bottom: 20rpx;
			}

			.time {
				text-align: center;
				font-size: 28rpx;
				color: #65554d;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			padding-top: 40rpx;

			.btn {
				flex: 1 1 auto;
				text-align: center;
				line-height: 90rpx;
				height: 90rpx;
				outline: none !important;
				background: #fe9c29;
				color: #fff;
				border: none;
				border-radius: 90rpx;
				overflow: hidden;
				font-size: 28rpx;
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}

				&:before,
				&:after {
					display: none;
				}

				&.gray {
					background: #fff;
					color: #fe9c29;
					width: 250rpx;
					flex: 0 0 auto;
				}
			}
		}

		.wbox {
			padding: 0 40rpx;
			background: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			&:last-child {
				margin-bottom: 0;
			}

			.lint {
				font-size: 28rpx;
				padding-top: 30rpx;
				color: #65554d;
				font-weight: bold;
			}

			.textarea {
				border: none;
				background: #fff;
				font-size: 28rpx;
				color: #65554d;
				outline: none;
				line-height: 1.5;
				padding: 30rpx 0 40rpx;
				display: block;
			}

			.dabtn {
				line-height: 100rpx;
				text-align: center;
				background: #ffebd4;
				margin: 0 -40rpx;
				color: #fe9c29;
				font-size: 28rpx;
			}

			.line {
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				height: 100rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #f7f5f2;
				font-size: 28rpx;

				&:last-child {
					border: none;
				}

				.ll {
					flex: 0 0 auto;
					overflow: hidden;
					padding-right: 30rpx;
					color: #897f7a;
				}

				.lr {
					flex: 1 1 auto;
					display: flex;
					align-items: center;
					text-align: right;
					justify-content: flex-end;
					color: #65554d;

					.ico {
						flex: 0 0 auto;
						margin-left: 10rpx;

						image {
							display: block;
							width: 11rpx;
							height: 19rpx;
						}
					}

					.cur {
						flex: 0 0 auto;
					}
				}
			}
		}
	}
</style>